import React, { useEffect } from "react";
// import * as monaco from "monaco-editor";

export default () => {
//   useEffect(() => {
//     // @ts-ignore
//     self.MonacoEnvironment = {
//       getWorker: function (workerId, label) {
//         // @ts-ignore
//         const getWorkerModule = (moduleUrl, label) => {
//           // @ts-ignore
//           return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), {
//             name: label,
//             type: "module",
//           });
//         };

//         switch (label) {
//           case "json":
//             return getWorkerModule(
//               "/monaco-editor/esm/vs/language/json/json.worker?worker",
//               label
//             );
//           case "css":
//           case "scss":
//           case "less":
//             return getWorkerModule(
//               "/monaco-editor/esm/vs/language/css/css.worker?worker",
//               label
//             );
//           case "html":
//           case "handlebars":
//           case "razor":
//             return getWorkerModule(
//               "/monaco-editor/esm/vs/language/html/html.worker?worker",
//               label
//             );
//           case "typescript":
//           case "javascript":
//             return getWorkerModule(
//               "/monaco-editor/esm/vs/language/typescript/ts.worker?worker",
//               label
//             );
//           default:
//             return getWorkerModule(
//               "/monaco-editor/esm/vs/editor/editor.worker?worker",
//               label
//             );
//         }
//       },
//     };

//     // @ts-ignore
//     monaco.editor.create(document.getElementById("monaco-editor"), {
//       value: "function hello() {\n\talert('Hello world!');\n}",
//       language: "javascript",
//     });
//   }, []);
  return (
    <div>
      monaco-editor
      <div id="monaco-editor"></div>
    </div>
  );
};
